<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCommonStore } from '@/stores'
const route = useRoute()
const router = useRouter()
const selectedCategory = computed(() => useCommonStore().selectedCategory)

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
// const items = ref([
//   {
//     key: '1',
//     label: 'Rares',
//     title: 'Rares',
//   },
//   {
//     key: '2',
//     label: 'Crafts',
//     title: 'Crafts',
//   },
//   {
//     key: '3',
//     label: 'Runeword Builder',
//     title: 'Runeword Builder',
//   },
//   {
//     key: '4',
//     label: 'Runes',
//     title: 'Runes',
//   },
//   {
//     key: 'sub1',
//     label: 'Runewords',
//     title: 'Runewords',
//     children: [],
//   },
//   {
//     key: 'sub2',
//     label: 'Charms',
//     title: 'Charms',
//     children: [],
//   },
//   {
//     key: 'sub3',
//     label: 'Jewels',
//     title: 'Jewels',
//     children: [],
//   },
//   {
//     key: 'sub4',
//     label: 'Amulets',
//     title: 'Amulets',
//     children: [],
//   },
//   {
//     key: 'sub5',
//     label: 'Rings',
//     title: 'Rings',
//     children: [
//       {
//         key: '7',
//         label: 'Option 7',
//         title: 'Option 7',
//       },
//     ],
//   },
//   {
//     key: 'sub6',
//     label: 'Armor',
//     title: 'Armor',
//     children: [],
//   },
//   {
//     key: 'sub7',
//     label: 'Belts',
//     title: 'Belts',
//     children: [],
//   },
//   {
//     key: 'sub8',
//     label: 'Gloves',
//     title: 'Gloves',
//     children: [],
//   },
//   {
//     key: 'sub9',
//     label: 'Helms',
//     title: 'Helms',
//     children: [],
//   },
//   {
//     key: 'sub10',
//     label: 'Shields',
//     title: 'Shields',
//     children: [],
//   },
//   {
//     key: 'sub11',
//     label: 'Weapons',
//     title: 'Weapons',
//     children: [],
//   },
//   {
//     key: 'sub12',
//     label: 'Set Items',
//     title: 'Set Items',
//     children: [],
//   },
//   {
//     key: 'sub11',
//     label: 'Gems',
//     title: 'Gems',
//     children: [],
//   },
//   {
//     key: 'sub11',
//     label: 'Keys + Organs',
//     title: 'Keys + Organs',
//     children: [],
//   },
//   {
//     key: 'sub11',
//     label: 'Essences + Tokens',
//     title: 'Essences + Tokens',
//     children: [],
//   },
// ])
// 点击菜单
// const openChange = (e) => {
//   console.log(e)
//   if (route.name === 'games') {
//     console.log('games')
//     router.push({ name: 'games' })
//   }
// }
// 点击item
const handleClick = (menuInfo) => {
  const { key } = menuInfo
  console.log(menuInfo)
  router.replace({ name: 'products', query: { category: key } })
}
// defineExpose({ items })
</script>
<template>
  <div class="w-50 border border-gray-200">
    <!-- openChange -->
    <a-menu
      v-model:openKeys="selectedCategory.openKeys"
      v-model:selectedKeys="selectedCategory.keys"
      mode="inline"
      :items="list"
      @click="handleClick"
    />
  </div>
</template>
<style lang="scss" scoped>
:deep(.ant-menu) {
  border-inline-end: none !important;
}
:deep(.ant-menu-item),
:deep(.ant-menu-submenu-title) {
  height: 34px !important;
  border-radius: 0 !important;
}
:deep(.ant-menu-sub.ant-menu-inline) {
  background-color: #fff !important;
}
:deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
  color: #333 !important;
}
:deep(.ant-menu-item-selected),
:deep(.ant-menu-item:not(.ant-menu-item-selected):hover),
:deep(.ant-menu-submenu-title:hover) {
  color: #fff !important;
  background-color: #f9a044 !important;
}
</style>
